<!DOCTYPE html>
<style>* { font-family: monospace; }</style>
<div id="host1">[<span id="one" slot="one">One</span>]</div>
<div id="host2">[<span id="two" slot="two">Two</span>]</div>
<script>
function doDrag(start, end) {
    if (!window.eventSender)
        return;
    eventSender.mouseMoveTo(start.offsetLeft + (start.offsetWidth / 2), start.offsetTop + 3);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(end.offsetLeft + (end.offsetWidth / 2), end.offsetTop + 3);
    eventSender.mouseUp();
}
var host1 = document.querySelector('#host1');
host1.attachShadow({mode: 'open'}).innerHTML = '[<slot name="one"></slot>]';
var host2 = document.querySelector('#host2');
host2.attachShadow({mode: 'open'}).innerHTML = '[<slot name="two"></slot>]';
var one = document.querySelector('#one');
var two = document.querySelector('#two');
doDrag(two, one);
</script>
